<template>
    <div class="manager-container-utils">
        <div class="manager-container-utils-left">
            <el-button
                v-for="(item, index) in btnList"
                type="primary"
                :plain="item.isPlain"
                :key="index"
                @click="toolClick(item)"
                :icon="item.iconName"
                >{{ item.name }}</el-button
            >
        </div>

        <!--   v-hasPerm="[item.perms]" -->
        <div class="manager-container-utils-right">
            <Loading
                v-if="loading"
                size="5"
                @click="refresh"
                color="#409EFF"
                class="loadingClass icon"
            ></Loading>
            <Refresh
                v-else
                size="5"
                @click="refresh"
                class="icon"
                color="#409EFF"
            ></Refresh>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    btnList: {
        required: true,
        default: () => [] as any,
    },
    loading: {
        required: false,
        default: () => false,
    },
});
const emit = defineEmits(["toolClick", "reFresh"]);
const toolClick = (item: any) => {
    emit("toolClick", item);
};
const refresh = () => {
    console.log("00000");
    emit("reFresh");
};
</script>

<style lang="scss" scoped>
.manager-container-utils {
    display: flex;
    position: relative;
    margin-top: 20px;
    background: url("../../../assets/images/from_bg.png");
    background-size: 100% 100%;
    min-height: 70px;
    align-items: center;

    &-left {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        width: 100%;
        margin-left: 22px;
    }
    &-right {
        display: flex;
        justify-content: flex-end;
        width: 20%;
        padding-right: 10px;
        .el-button {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 16px;
            border: none;
            background: none;
        }
        .loadingClass {
            -webkit-animation: rotating 2s linear infinite;
            -moz-animation: rotating 2s linear infinite;
            -o-animation: rotating 2s linear infinite;
            animation: rotating 2s linear infinite;
        }
    }

    .el-button {
        height: 39px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 16px;
        border: none;
    }
}
</style>
